import type {App} from 'vue'

// MutationObserver 主要监听子集的变化，还有属性的变化以及增删查改
// IntersectionObserver 主要监听元素是否在视口内
// ResizeObserver 主要监听元素宽高的变化
/**
 * 自定义hook useResize
 * @param el
 * @param callback
 */
const useResize = (el: HTMLElement, callback: Function) => {
  let resize = new ResizeObserver(entries => {
    callback(entries[0].contentRect)
  })
  resize.observe(el)
}

/**
 * 自定义指令 v-resize
 * @param app
 */
const install = (app: App) => {
  app.directive('resize', {
    mounted(el, binding) {
      useResize(el, binding)
    }
  })
}

useResize.install = install

export default useResize


